import React from "react";
import { Menu } from 'antd/lib';

import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import PageHeader from "@/components/PageHeader";

import TimeSerialBread from "@/components/TimeSerialBread";

import "./TimeSerialList.less";
import timestruct from "@/services/timestruct";
import routes from "@/services/routes";
import AppleOutlined from "@ant-design/icons/AppleOutlined";
import AndroidOutlined from "@ant-design/icons/AndroidOutlined";

class TimeSerialList extends React.Component {

  state = {
    items:[],//{
    //   id: "0",
    //   num: "1",
    //   calendar_enum: "nature",
    //   name: "自然日历",
    //   timeserialnode_enum: "year",
    //   parent_id:"0",
    // },], //20200309
    calendar_enum: "nature",
    loading: true,
  };
  componentWillMount() {
    timestruct.query('0').then(data => {
      this.setState({
            items: data,
            loading: false,
      });
    });
    //this.refreshData();
  }

  tabsClick = e => {
    this.setState({
      calendar_enum: e.key,
      loading: false,
    });
  };

  render() {
    if (this.state.loading) return null;
    return (
    <div className="settings-screen">
      <div className="container">
        <PageHeader title="时间系列" />
        <div className="bg-white tiled">
          <Menu onClick={this.tabsClick} selectedKeys={[this.state.calendar_enum]} mode="horizontal">
          {this.state.items.map(item => (
            <Menu.Item key = {item.calendar_enum}>
              {item.calendar_enum==="nature" && (<AppleOutlined />)}
              {item.calendar_enum !=="nature" && (<AndroidOutlined />)}
               {item.name}
            </Menu.Item>
          ))}
          </Menu>
          <div className="p-15">
            <TimeSerialBread  item={this.state.items.find(item => item.calendar_enum === this.state.calendar_enum)}/>
          </div>
        </div>
      </div>
    </div>
    );
  }
}

routes.register(
  "Timeserial.List",
  routeWithUserSession({
    path: "/timeserial",
    title: "时间系列",
    render: pageProps => <TimeSerialList {...pageProps}/>,
  })
);
routes.register(
  "Timeserial.New",
  routeWithUserSession({
    path: "/timeserial/new",
    title: "时间系列",
    render: pageProps => <TimeSerialList {...pageProps} isNewOrEditPage/>,
  })
);
// export default [
//   routeWithUserSession({
//     path: "/timeserial",
//     title: "时间系列",
//     render: pageProps => <TimeSerialList {...pageProps} />,
//   }),
//   routeWithUserSession({
//     path: "/timeserial/new",
//     title: "时间系列",
//     render: pageProps => <TimeSerialList {...pageProps} isNewOrEditPage />,
//   }),
// ];
